import { useRef } from 'react'
import { Select } from 'antd'

const InfiniteScrollSelect = (props) => {
  const pageNum = useRef(1)
  const { loading, getData, totalPage, ...rest } = props

  const onPopupScroll = (e) => {
    if (pageNum.current === totalPage) return
    const { clientHeight, scrollHeight, scrollTop } = e.target
    if (scrollHeight - scrollTop > clientHeight && !loading) {
      pageNum.current += 1
      getData(pageNum.current)
    }
  }

  return <Select {...rest} onPopupScroll={onPopupScroll} />
}

export default InfiniteScrollSelect
